@import "../../common/base.less";
@import "../../common/newNormalize.less";

.clearfix {
    zoom: 1
}

.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both
}

body {
    width: 100%;
    height: 100%;
    background: #E0E3E8 !important;
}



/*  自定义滚动条
::-webkit-scrollbar
   width:10px;
   background:green;整个滚条背景
} 
::-webkit-scrollbar-thumb{
   -webkit-border-radius:4px;
   border-radius:4px;
   background:red; 滚条内嵌颜色
} 
::-webkit-scrollbar-button {
    background-color:red;两边端按钮颜色
} */

.Pcenter {
    background: #E0E3E8 !important;
    height: auto;
    position: relative;
    min-height: 100%;
    .PcenterMain {
        .px2rem(width, 1200);
        height: auto;
        overflow: hidden;
        margin: 0 auto;
        .userInfo {
            width: 100%;
            .px2rem(height, 270);
            background: #E9ECEF;
            .px2rem(margin-top, 80);
            .userInfoImg {
                .px2rem(width, 150);
                .px2rem(height, 150);
                .px2rem(border-radius, 75);
                .px2rem(margin-left, 40);
                .px2rem(margin-top, 40);
                float: left;
            }
            .userInfoInf {
                .px2rem(width, 980);
                .px2rem(height, 230);
                .px2rem(margin-top, 40);
                float: right;
                .userName {
                    .px2rem(font-size, 24);
                    color: #000;
                }
                .userText {
                    .px2rem(font-size, 18);
                    .px2rem(width, 980);
                    .px2rem(height, 75);
                    .px2rem(line-height, 75);
                    overflow: hidden;

                    .name {
                        color: #000;
                        span {
                            color: #979EA4;
                        }
                    }
                    .loginOut {
                        display: inline-block;
                        .px2rem(width, 60);
                        .px2rem(height, 20);
                        .px2rem(margin-left, 50);
                        position: relative;
                        top: 0.03rem;
                        background: url(../../../static/img/loginOut.png);
                        background-size: 100% 100%;
                    }
                    .money {
                        display: inline-block;
                        .px2rem(width, 110);
                        .px2rem(height, 38);
                        background: #B12D44;
                        color: #fff;
                        .px2rem(font-size, 16);
                        text-align: center;
                        .px2rem(line-height, 38);
                        .px2rem(border-radius, 5);
                        float: right;
                        position: relative;
                        top: 0.2rem;
                        right: 0.4rem;
                    }
                    .money:hover {
                        background: #7f1f30;
                    }
                }
                .playSerList {
                    .px2rem(width, 980);
                    height: auto;
                    .px2rem(font-size, 18);
                    .px2rem(line-height, 18);
                    color: #B12D44;
                    .text {
                        display: block;
                        float: left;
                        color: #000;
                        .px2rem(width, 140);
                        .px2rem(font-size, 18);
                        .px2rem(margin-top, 10);
                    }
                    .listItem {
                        float: right;
                        .px2rem(width, 800);
                        .px2rem(height, 100);
                        .px2rem(margin-top, -5);
                        overflow: hidden;


                        a {
                            display: block;
                            .px2rem(width, 250);
                            .px2rem(height, 40);
                            border: 1px solid #B12D44;
                            float: left;
                            .px2rem(line-height, 36);
                            text-align: center;
                            .px2rem(margin-top, 10);
                            .px2rem(margin-left, 10);
                            .px2rem(font-size, 18);
                            .px2rem(border-radius, 5);
                        }
                        a:hover {
                            color: #fff;
                            background: #B12D44;
                        }
                    }
                }
            }
        }
        .myMain {
            .px2rem(width, 1200);
            height: auto;
            .px2rem(margin-top, 20);
            .myMainLeft {
                float: left;
                .px2rem(width, 280);
                .px2rem(height, 403);
                background: #E9ECEF;
                .item {
                    display: block;
                    .px2rem(width, 280);
                    .px2rem(height, 80);
                    overflow: hidden;
                    color: #000;
                    .itemImg {
                        .px2rem(width, 32);
                        .px2rem(height, 32);
                        float: left;
                        .px2rem(margin-left, 30);
                        .px2rem(margin-top, 23);
                    }
                    .itemText {
                        .px2rem(font-size, 24);
                        .px2rem(line-height, 80);
                        position: relative;
                        .px2rem(left, 20);
                    }
                }
                .active {
                    background: #CFD2D7;
                }
            }
            .RightList {
                .px2rem(width, 900);
                float: right;
                position: relative;
            }
            .myMainRight {
                .px2rem(width, 900);
                .px2rem(height, 250);
                position: relative;

                .px2rem(padding-top, 20);
                .px2rem(padding-left, 20);
                .px2rem(padding-bottom, 20);
                .px2rem(margin-bottom, 20);
                transition: all 0.5s ease 0s;
                background: #E9ECEF;
                border: 1px solid #CFD2D7;
                float: right;
                .myMainRightImg {
                    .px2rem(width, 270);
                    .px2rem(height, 210);
                    .px2rem(margin-right, 10);
                    float: left;
                }
                .myMainRightSev {
                    float: right;
                    .px2rem(width, 580);
                    .px2rem(height, 230);
                    .title {
                        .px2rem(font-size, 24);
                        color: #000;
                    }
                    .subTitle {
                        .px2rem(width, 580);
                        .px2rem(height, 60);
                        .px2rem(line-height, 60);
                        .lastPlay {
                            display: block;
                            float: left;
                            .px2rem(font-size, 18);
                            color: #000;
                            .px2rem(height, 60);
                            .px2rem(line-height, 60);
                        }

                        .money {
                            display: inline-block;
                            .px2rem(width, 110);
                            .px2rem(height, 38);
                            background: #B12D44;
                            color: #fff;
                            .px2rem(font-size, 16);
                            text-align: center;
                            .px2rem(line-height, 38);
                            .px2rem(border-radius, 5);
                            float: right;
                            position: relative;
                            top: 0.1rem;
                            right: 0.4rem;
                        }
                        .money:hover {
                            background: #7f1f30;
                        }
                    }
                    .myGameListTwo {
                        .px2rem(width, 580);
                        .px2rem(height, 100);
                        overflow: hidden;
                        .loading {
                            .px2rem(width, 400);
                            text-align: center;
                        }
                        .myGameListUl {
                            .px2rem(width, 580);
                            .px2rem(padding-bottom, 20);
                            height: auto;
                            .listItem {
                                float: left;
                                a {
                                    display: block;
                                    .px2rem(width, 200);
                                    .px2rem(height, 40);
                                    border: 1px solid #B12D44;
                                    float: left;
                                    .px2rem(line-height, 36);
                                    text-align: center;
                                    .px2rem(margin-top, 5);
                                    .px2rem(margin-bottom, 5);

                                    .px2rem(margin-right, 10);
                                    .px2rem(font-size, 18);
                                    .px2rem(border-radius, 5);
                                }
                                a:hover {
                                    color: #fff;
                                    background: #B12D44;
                                }
                            }
                        }
                    }
                    /*  .myGameListTwo::-webkit-scrollbar {
                       display: none;
                   } */
                }
            }

/*
            .myMainRight:hover {
                .px2rem(height, 360);
            }
            .myMainRight:hover .myGameListTwo {
                .px2rem(height, 200);
                overflow-y: scroll;
            }*/
            

            .myGift {
                .px2rem(width, 900);
                height: auto;
                float: right;
                background: #E9ECEF;
                .myGiftTab {
                    width: 100%;
                    .px2rem(height, 90);
                    .px2rem(line-height, 90);
                    .px2rem(font-size, 24);
                    color: #000;

                    font-weight: 600;
                    .item {
                        display: block;
                        float: left;
                        .px2rem(height, 70);
                        .px2rem(line-height, 90);
                        .px2rem(font-size, 24);
                        .px2rem(margin-right, 32);
                        .px2rem(margin-left, 20);
                    }
                    .active {
                        color: #B12D44;
                        border-bottom: 2px solid #B12D44;
                    }
                }
                .myGiftList {
                    background: #E9ECEF;
                    .px2rem(width, 900);
                    height: auto;
                    .myGiftItem {
                        .px2rem(width, 900);
                        .px2rem(height, 150);
                        border-top: 0.5px solid #CFD2D7;
                        .px2rem(padding, 25);
                        .img {
                            .px2rem(width, 100);
                            .px2rem(height, 100);
                            .px2rem(margin-right, 15);
                            float: left;
                            position: relative;
                            img {
                                width: 100%;
                                height: 100%;
                                border: none;
                            }
                            .type {
                                .px2rem(width, 50);
                                .px2rem(height, 50);
                                position: absolute;
                                top: 0;
                                left: 0;
                            }
                        }
                        .itemName {
                            .px2rem(width, 355);
                            .px2rem(height, 100);
                            position: relative;
                            float: left;
                            .name {
                                .px2rem(font-size, 24);
                                color: #000;
                            }
                            .time {
                                .px2rem(font-size, 18);
                                color: #707B84;
                                position: absolute;
                                bottom: 0;
                                left: 0;
                            }
                        }
                        .giftNum {
                            .px2rem(width, 130);
                            height: 100%;
                            float: left;
                            margin-left: 0.5rem;
                            position: relative;
                            .num {
                                .px2rem(width, 128);
                                .px2rem(height, 40);
                                .px2rem(line-height, 36);
                                text-align: center;
                                color: #B12D44;
                                border: 1px solid #B12D44;
                                .px2rem(font-size, 18);
                            }
                            p {
                                .px2rem(width, 128);
                                .px2rem(height, 40);
                                .px2rem(line-height, 50);
                                .px2rem(font-size, 18);
                                text-align: center;
                                position: absolute;
                                bottom: 0;
                            }
                        }
                        .startGame {
                            .px2rem(width, 110);
                            height: 100%;
                            .px2rem(font-size, 18);
                            .px2rem(margin-left, 75);
                            float: left;
                            position: relative;

                            .details {
                                .px2rem(width, 110);
                                .px2rem(height, 40);
                                .px2rem(line-height, 40);
                                text-align: center;
                                background: #B12D44;
                                color: #fff;
                                .px2rem(border-radius, 5);
                            }
                            .details:hover {
                                background: #7f1f30;
                            }
                            .enterGame {
                                .px2rem(width, 110);
                                .px2rem(height, 40);
                                .px2rem(line-height, 40);
                                text-align: center;
                                background: #B12D44;
                                color: #fff;
                                position: absolute;
                                .px2rem(border-radius, 5);

                                bottom: 0;
                                left: 0;
                            }
                            .enterGame:hover {
                                background: #7f1f30;
                            }
                        }
                    }
                }
            }
        }
        /*分页*/
        
        .allGamePage {
            width: 9rem;
            .px2rem(height, 40);
            margin: 0 auto;
            margin-top: 1rem;
             margin-bottom: 1rem;
             margin-left: 3rem;
            #page {
                width: 100%;
                .px2rem(height,
                40);
                margin: 0 auto;
                position: relative;
                .pagination {
                    width: auto;
                    position: absolute;
                    left: 40%;
                    transform: translateX(-30%);
                    li {
                        .px2rem(width,
                        40);
                        .px2rem(height,
                        40);

                        a {
                            .px2rem(width,
                            40);
                            .px2rem(height,
                            40);
                            .px2rem(line-height,
                            40);
                            .px2rem(font-size,
                            12);
                            .px2rem(margin-left,
                            7);
                            text-align: center;
                            padding: 0;
                            color: #7D8993;
                            .px2rem(border-radius, 5);
                            background: rgba(212, 216, 220, 1);
                            border: none;
                            float: left;
                        }
                        .active {
                            background: #B12D44 !important;
                            color: #fff;
                        }

                        .next {
                            .px2rem(height,
                            40);
                            .px2rem(width,
                            65);
                            .px2rem(border-radius, 5);
                        }
                    }
                }
                .allPage {
                    display: block;
                    float: left;
                    .px2rem(border-radius, 5);

                    .px2rem(margin-left,
                    10);
                    .px2rem(width, 50);
                    .px2rem(height, 20);
                    .px2rem(line-height, 20);
                    .px2rem(margin-top, 10);
                    overflow: hidden;

                    .px2rem(font-size, 12);
                    color: #7D8993;
                    text-align: center;
                }


                .jump {
                    display: block;
                    float: left;
                    .px2rem(height, 20);
                    .px2rem(line-height, 20);
                    .px2rem(margin-right, 10);
                    .px2rem(margin-left, 10);
                    .px2rem(font-size, 12);
                    position: relative;
                    .px2rem(top, 10);
                    color: #7D8993;

                    overflow: hidden;
                }
                label {
                    display: block;
                    float: left;
                    color: #7D8993;
                    .px2rem(margin-right,
                    8);
                    .px2rem(font-size, 12);
                    .px2rem(height, 20);
                    .px2rem(line-height, 20);
                    .px2rem(margin-top, 10);
                }
                .pageNum {
                    display: block;
                    float: left;
                    .px2rem(width,
                    40);
                    .px2rem(height,
                    40);
                    .px2rem(line-height,
                    40);
                    .px2rem(font-size, 12);
                    text-align: center;
                    .px2rem(border-radius, 5);
                    background: #D4D8DC;
                    .px2rem(margin-right,
                    10);
                    padding: 0;
                    border: none;
                    color: #7D8993;
                }

                .btnPage {

                    border: none;
                    display: block;
                    float: right;
                    .px2rem(height,
                    40);
                    .px2rem(line-height,
                    40);
                    background: #D4D8DC;
                    .px2rem(font-size, 12);
                    .px2rem(border-radius, 5);
                    text-align: center;
                    color: #7D8993;
                }
            }
        }
    }
}